<template>
  <div class="cas">
    <div>
      <el-row>
        <el-col :span="6">
          <div class="block date">
            <span>年份：</span>
            <el-select v-model="yeardata" placeholder="选择年份">
              <el-option v-for="years in yeardata" :key="years" :label="years" :value="years">
                {{years}}
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6" class="date">
          <span>类别：</span>
          <el-select v-model="shoptypedata" placeholder="选择类别">
            <el-option v-for="shoptype in shoptypedata" :key="shoptype" v-model="shoptype.shoptypename">
              {{shoptype.shoptypename}}
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div ref="echartsmain" id="myChart" class="beauty"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  var _this;
  export default {
    mounted() {
      _this = this
      _this.echarts()
      _this.query()

    },
    data() {
      return {
        yeardata: [],
        monthdata: [],
        shopdata: [],
        shoptype: [],
        // 绘制图表
        option:{
          color: [
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
            '#91c7ae',
            '#749f83',
            '#ca8622',
            '#bda29a',
            '#6e7074',
            '#546570',
            '#c4ccd3'
          ],
          title: {
            text: '入库报表'
          },
          tooltip: {},
          xAxis: { //x轴
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //商品名
          },
          yAxis: {}, //y轴
          series: [{ //弹出消息提示
              type: 'bar',
              data: [11, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 10, 20],
              barGap: '20%',
              barCategoryGap: '40%',
              name: '上衣'
            },
            {
              type: 'bar',
              data: [12, 14, 9, 9, 11, 12, 14, 9, 9, 11, 9, 11],
              name: '裤子'
            },
            {
              type: 'bar',
              name: '皮鞋',
              data: [65, 60, 40, 55, 60, 50, 14, 9, 9, 11, 12, 50]
            }
          ],
          legend: {
            left: 'right'
          }
        }
      }
    },
    methods: {
      echarts() {
        let myChart = echarts.init(_this.$refs.echartsmain);
        // 基于准备好的dom，初始化echarts实例
        window.onresize = function() {
          myChart.resize();
        },
        myChart.setOption(this.option);
      },
      query() {
        _this.dialogFormVisible = true,
          _this.$axios.post(
            "/inshop/inchart")
          .then(function(param) {
            console.log("图表数据：")
            console.log(param)
            _this.yeardata = param.data.year
            _this.monthdata = param.data.month
            _this.shopdata = param.data.shops
            _this.shoptypedata = param.data.shoptypes
          })
      },
    }
  }
</script>

<style>
  .cas {
    width: 100%;
    height: 100%;
  }

  .beauty {
    width: 80%;
    height: 80%;
    display: block;
    margin: 0 auto
  }

  .date {
    line-height: 20px;
    margin-top: 20px;
  }

  .date span {
    text-align: center;
  }
</style>
